<template>
  <view class="container" >
    <!-- <view class="header">{{title}}</view> -->
    <view class="post" v-for="(post, index) in posts" :key="index"  @click="toTrendStatus">
      <view class="post-header">{{post.title}}</view>
      <view class="post-content">{{post.content}}</view>
      <view class="post-footer">
        <view class="post-author">{{post.author}}</view>
        <view class="post-date">{{post.date}}</view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      title: "我的动态",
      posts: [
        {
          title: "第一篇动态",
          content: "这是我的第一篇动态内容。",
          author: "小明",
          date: "2021-01-01"
        },
        {
          title: "第二篇动态",
          content: "这是我的第二篇动态内容。",
          author: "小红",
          date: "2021-01-02"
        },
        {
          title: "第三篇动态",
          content: "这是我的第三篇动态内容。",
          author: "小刚",
          date: "2021-01-03"
        }
      ]
    };	
  },
  
  methods:{
	  toTrendStatus(){
		  uni.navigateTo({
		    url: '/pages/mine/trends/trendstatus'
		  })
	  }
  }
};
</script>
<style>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 20rpx;
}
.header {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}
.post {
  width: 100%;
  margin-bottom: 20rpx;
  border: 1rpx solid #ccc;
  border-radius: 10rpx;
  padding: 20rpx;
}
.post-header {
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}
.post-content {
  font-size: 24rpx;
  margin-bottom: 10rpx;
}
.post-footer {
	width:80%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.post-author {
  font-size: 24rpx;
}
.post-date {
  font-size: 24rpx;
}
</style>